<template>
    <div class="cart">
        <Header title="购物车" :edit="true" />
        <CartDetail v-if="isShow" :changeShow="changeShow" />
        <Empty v-else/>
        <Footer_1 />
    </div>
</template>

<script>
import Footer_1 from '../../components/Footer_1.vue'
import Empty from '@/components/Empty.vue';
import Header from '@/components/Header.vue';
import CartDetail from './components/CartDetail.vue';
import { useStore } from 'vuex';
import { onMounted,ref } from 'vue';
export default{
    components: {
        Footer_1,
        Empty,
        Header,
        CartDetail,
    },
    setup(){
        const isShow = ref(true);
        const store = useStore();
        const init = ()=>{
            if(store.state.cartList.length===0){
                isShow.value = false;
            }
        };
        const changeShow=()=>{
            isShow.value=false
        }
        onMounted(()=>{
            init();
        });
        return {
            isShow,
            store,
            changeShow,
        };
    },
};
</script>

<style lang="less" scoped>
.cart{
    display: flex;
    flex-flow: column;
    height: 100%;
    .content{
        flex: 1;
        overflow-y: auto;
    }
}
</style>